<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title></title>
        <style>/* css样式表 网页装饰 */
            /* css reset */
            body{
                margin: 0;/* 外边距 0不用给单位 */
                background-color: #434343;
            }
            .wrap{
                overflow: hidden;/* 超出隐藏  创建BFC环境 */
                width: 930px;/* 宽度: 200像素; */
                /* height: 400px; *//* 高度 */
                margin: 50px auto;/* 上下 左右 */
                background-color: #2D2D2D;/* 背景颜色: 原谅绿; */
                /* font-size: 50px; *//* 文字大小 */
                /* line-height: 20px; */
            }
            .wrap img{
                float: left;/* 左浮动 */
                display: block;/* 元素类型转换 */
                width: 280px;
                height: 180px;
                margin: 10px;
                /* 边框属性 粗细 样式 颜色 */
                border: 2px solid #7C7C7C;
                border-radius: 10px;/* css3圆角属性 */
                /* vertical-align: top; *//* 基线对齐方式 居中 */
                
            }
            /*
                img标签 空白间距
                inline -> 行内元素 -> 并排站
                block -> 块级元素 -> 独占一行
                float -> 父级高度塌陷 -> BFC -> 块级格式化上下文
            */
        </style>
    </head>
    <body><!-- 写给用户看的  写给人看的 -->
        <div class="wrap"><!-- 盒子标签 -->
            <!-- 加载图片的标签 src图片路径 -->
            <img src="images/1.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/2.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/3.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/4.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/5.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/6.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/7.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/8.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/9.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/10.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/11.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/12.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/13.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/14.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/15.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/16.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/17.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/18.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/19.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/20.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/21.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/22.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/23.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/24.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/25.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/26.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/27.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/28.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/29.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/30.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/31.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/32.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/33.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/34.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/35.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/36.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/37.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/38.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/39.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/40.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/1.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/2.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/3.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/4.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/5.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/6.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/7.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/8.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/9.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/10.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/11.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/12.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/13.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/14.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/15.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/16.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/17.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/18.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/19.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/20.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/21.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/22.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/23.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/24.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/25.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/26.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/27.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/28.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/29.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/30.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/31.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/32.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/33.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/34.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/35.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/36.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/37.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/38.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/39.jpg" alt="林允儿" width="1920" height="1080">
            <img src="images/40.jpg" alt="林允儿" width="1920" height="1080">
            <script src="js/jquery.js"></script>
            <script src="js/lazyload.js"></script>
            <script>
                $("img").lazyload({
                  placeholder : "images/loading.gif", //用图片提前占位
                    // placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
                  effect: "fadeIn", // 载入使用何种效果
                    // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
                  threshold: -200, // 提前开始加载
                    // threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
                  //  event: 'click',  // 事件触发时才加载
                    // event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
                //  container: $("#container"),  // 对某容器中的图片实现效果
                    // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
                 // failurelimit : 10 // 图片排序混乱时
                     // failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
                });
            </script>
        </div>
    </body>
</html>
